<template>
  <div class="file-preview">
    <div class="file-item" v-for="(ls, i) in list" :key="i" @click.stop="preview(ls)">
      <template v-if="meta && meta.preview && getType(ls) === 'image'">
        <el-image
          fit="cover"
          :src="getUrl(ls)"
          lazy
          :style="{
            width: meta.width ? `${meta.width}` : undefined,
            height: meta.height ? `${meta.height}` : '54px'
          }"
        />
      </template>
      <template v-else>
        <img v-if="getIcon(ls)" :src="getIcon(ls)" />
        <el-link v-else-if="list?.length === 1">
          <Icon icon="svg-icon:file" :size="18" />点击预览
        </el-link>
        <span v-else>{{ getUrl(ls) }}</span>
      </template>
    </div>
  </div>
</template>

<script>
import { useBasicStoreWithOut } from '@/store/modules/basic'
import { createImageViewer } from '@/components/ImageViewer'
import { FilePreview } from '../components/FilePreview'

const basicStore = useBasicStoreWithOut()

export default {
  props: {
    meta: {
      type: Object,
      default: () => ({})
    },
    path: {
      type: String,
      default: ''
    },
    paths: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  computed: {
    icons() {
      return basicStore.getIcon?.file || {}
    },
    list() {
      return [this.path, ...(this.paths || '').split(',')].filter((p) => !!p)
    }
  },
  methods: {
    getType(path) {
      // const keys = Object.keys(this.icons)
      //   .map((t) => `(${t})`)
      //   .join('|')
      // const pres = path.match(new RegExp(`^(${keys}):`))
      // const prev = pres ? pres[0] : ''
      return path.split(':')[0]
    },
    getIcon(path) {
      const keys = Object.keys(this.icons)
        .map((t) => `(${t})`)
        .join('|')
      const pres = path.match(new RegExp(`^(${keys}):`))
      const prev = pres ? pres[0] : ''
      return this.icons[prev.replace(':', '')]
    },
    getUrl(path) {
      const paths = path.split(':')
      return paths[1] || paths[0]
    },
    preview(path) {
      const paths = path.split(':')
      const icon = paths.length > 1 ? paths[0] : ''
      const url = paths[1] || paths[0]
      // 如果是图片，直接调用图片预览
      if (icon === 'image') {
        createImageViewer({
          urlList: [url]
        })
      } else {
        FilePreview({
          url
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
.file-preview {
  display: inline-block;
  padding: 2px 0;

  .file-item {
    line-height: 0;
    text-align: left;
    cursor: pointer;
    word-break: break-all;

    &:hover {
      background-color: var(--el-hover-bg-color);
    }

    img {
      display: inline-block;
      width: 15px;
      height: 15px;
      vertical-align: middle;
      margin-right: 5px;
    }

    span {
      vertical-align: middle;
    }
  }

  .container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 20;
    overflow: auto;
    background: gray;

    .close {
      position: fixed;
      right: 15px;
      top: 10px;
      font-size: 20px;
      cursor: pointer;
      z-index: 21;
      background: #ccc;
      color: #fff;
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 100%;
    }
  }
}
</style>
<style lang="less">
.file-preview-main {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 4000;
  overflow: auto;
  background: gray;

  .close {
    position: fixed;
    right: 15px;
    top: 10px;
    font-size: 20px;
    cursor: pointer;
    z-index: 2100;
    background: #ccc;
    color: #fff;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 100%;
  }
}
</style>
